<template>
  <div>
    <!-- table -->
    <a-card :bordered="false">
      <a-row>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('bankList.sh')" :content="waitCnt" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('bankList.cg')" :content="succCnt" :bordered="true"/>
        </a-col>
        <a-col :sm="8" :xs="24">
          <head-info title="$t('bankList.sb')" :content="failCnt"/>
        </a-col>
      </a-row>
    </a-card>
    <a-card style="margin-top: 24px">
      <div class="table-operator">
        <div style="margin-bottom:15px;">
          {{ $t('bankList.lxsx') }}:
          <a-radio-group style="margin-right:20px;" @change="handleChangeType" defaultValue="-1">
            <a-radio-button>{{ $t('bankList.qb') }}</a-radio-button>
            <a-radio-button value="0">{{ $t('bankList.sh') }}</a-radio-button>
            <a-radio-button value="1">{{ $t('bankList.cg') }}</a-radio-button>
            <a-radio-button value="-1">{{ $t('bankList.sb') }}</a-radio-button>
          </a-radio-group>
          <a-input-search style="width:280px;" placeholder="$t('bankList.sssjh')" @search="onSearch" enterButton />
        </div>
      </div>
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
        :loading="dataLoading"
      >
        <template slot="imgs" slot-scope="text">
          <template>
            <div v-if="text">
              <img style="margin-right:5px;" v-bind:key="item" v-for="item in text.split(',')" @click="handleClickReview($hostServer+item)" class="table-img" :src="$hostServer+item" alt=""/>
            </div>
            <div v-else>-</div>
          </template>
        </template>
        <template slot="bank" slot-scope="text, record">
          <ul>
            <li>{{record.bank_name}}</li>
            <li>{{record.name}}</li>
            <li>{{record.number}}</li>
          </ul>
        </template>
        <template slot="alipay" slot-scope="text, record">
          <ul>
            <li>{{record.alipay_account}}</li>
            <li>{{record.alipay_name}}</li>
          </ul>
        </template>
        <template slot="status" slot-scope="text">
          <template v-if="text==0">
            <template>{{ $t('bankList.dsh') }}</template>
          </template>
          <template v-else-if="text==1">
            <span style="color:green">{{ $t('bankList.tg') }}</span>
          </template>
          <template v-else>
            <span style="color:gray">{{ $t('bankList.jj') }}</span>
          </template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <span>
            <a-popconfirm title="$t('bankList.sfysccx')" @confirm="handleClickDelete(record.id)">
              <a style="color:red">{{ $t('bankList.sc') }}</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>
      <div style="margin-top:15px;">
        <MyPage :curr="page.curr" :size="page.size" :all="page.total" @changePage="handleChangePage" @changePageSize="handleChangePageSize"/>
      </div>
    </a-card>
    <DialogImg :img_url="curr_img_url" :is_show="curr_img_show"/>
  </div>
</template>

<script>
import HeadInfo from '@/components/tools/HeadInfo'
import { mixin, mixinDevice } from '@/utils/mixin'
import DialogImg from '../../../components/DialogImg'
import MyPage from '../Page'

export default {
  name: 'content_bank',
  mixins: [mixin, mixinDevice],
  components: {
    HeadInfo,
    DialogImg,
    MyPage
  },
  data () {
    return {
      description: this.$t('bankList.bhlsyxkbddjl'),
      loading: false,
      dataLoading: false,
      curr_img_url: '',
      curr_img_show: false,
      // table
      columns: [
        {
          title: this.$t('bankList.lx'),
          dataIndex: 'belong',
          key: 'belong',
          scopedSlots: { customRender: 'belong' }
        },
        {
          title: this.$t('bankList.yh'),
          dataIndex: 'user.username',
          key: 'user.username',
          scopedSlots: { customRender: 'user.username' }
        },
        {
          title: this.$t('bankList.yxxx'),
          dataIndex: 'bank_name',
          key: 'bank_name',
          scopedSlots: { customRender: 'bank' }
        },
        {
          title: this.$t('bankList.zfbxx'),
          dataIndex: 'alipay_name',
          key: 'alipay_name',
          scopedSlots: { customRender: 'alipay' }
        },
        {
          title: this.$t('bankList.bz'),
          dataIndex: 'remark',
          key: 'remark',
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: this.$t('bankList.hf'),
          dataIndex: 'reply',
          key: 'reply',
          scopedSlots: { customRender: 'reply' }
        },
        {
          title: this.$t('bankList.dqzs'),
          dataIndex: 'status',
          key: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: this.$t('bankList.cz'),
          key: 'action',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: [],
      errors: [],
      waitCnt: 0,
      succCnt: 0,
      failCnt: 0,
      showBindInfo: false,
      searchUsername: '',
      page: {
        curr: 1,
        size: 20,
        total: 0
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    handleClickHideBindInfo () {
      this.showBindInfo = false
    },
    handleClickAdd () {
      this.$refs.createModal.add()
    },
    getList (type) {
      let url = '/bank/list?page=' + this.page.curr + '&size=' + this.page.size
      let args = []
      if (type !== undefined) {
        args.push('type=' + type)
      }
      if (this.searchUsername) {
        args.push('username=' + this.searchUsername)
      }
      if (args.length > 0) {
        url += '&' + args.join('&')
      }
      this.$http.get(url).then(res => {
        this.data = res.list
        this.page.total = res.total
        this.waitCnt = 0
        this.succCnt = 0
        this.failCnt = 0
        this.data.forEach(item => {
          if (item.status === 0) {
            this.waitCnt++
          } else if (item.status === 1) {
            this.succCnt++
          } else {
            this.FailCnt++
          }
        })
      }).catch(err => {
        this.$notification.error({
          message: this.$t('bankList.sb'),
          description: err.message
        })
      })
    },
    handleClickDelete (id) {
      this.$http.post('/bank/delete', this.$qs.stringify({
        id: id
      })).then(res => {
        if (res.code === 0) {
          const newData = this.data.filter(item => item.id !== id)
          this.data = newData
          this.$notification.success({
            message: this.$t('bankList.cg'),
            description: res.msg
          })
        } else {
          this.$notification.error({
            message: this.$t('bankList.sb'),
            description: res.msg
          })
        }
      }).catch(err => {
        this.$notification.error({
          message: this.$t('bankList.sb'),
          description: err.message
        })
      })
    },
    handleChangeType (e) {
      this.getList(e.target.value)
    },
    handleClickReview (url) {
      this.curr_img_url = url
      this.curr_img_show = !this.curr_img_show
    },
    onSearch (val) {
      this.searchUsername = val
      this.getList()
    },
    handleChangePageSize (size) {
      this.page.size = size
      this.getList()
    },
    handleChangePage (page) {
      this.page.curr = page
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
  .card{
    margin-bottom: 24px;
  }
  .douyin-bind-img{
    margin-bottom:10px;
    text-align: center;
  }
  .douyin-bind-img img{
    width:100px;
    height:100px;
    border-radius: 50%;
  }
</style>
